<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin: 4px;padding:4px;}
    img{width: 100px;height:100px;}
  </style>
</head>
<body>
  
</body>
<script>

  // 有后代的对象：枝对象
  // 无后代的对象：叶对象

  class CreateImg{
    constructor(src){
      this.ele = document.createElement("img");
      this.ele.src = src;
    }
    add(){
      console.log("这是一个叶对象，不能添加子对象")
    }
    remove(){
      console.log("这是一个叶对象，没有子对象能被删除")
    }
    addBorder(){
      this.ele.style.border = "solid 2px red";
    }
    removeBorder(){
      this.ele.style.border = "";
    }
  }

  class CreateBox{
    constructor(id){
      this.ele = document.createElement("div");
      this.ele.id = id;
      this.children = [];
    }
    add( child ){
      this.children.push( child );
      this.ele.appendChild( child.ele );
    }
    remove( child ){
      let i = this.children.indexOf(child);
      if(i !== -1){
        this.children.splice(i, 1);
      }
      child.ele.remove();
    }
    addBorder(){
      this.ele.style.border = "solid 2px black";
      this.children.forEach(val=>{
        val.addBorder();
      })
    }
    removeBorder(){
      this.ele.style.border = "";
      this.children.forEach(val=>{
        val.removeBorder();
      })
    }
  }


  const img1 = new CreateImg("https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF");
  const img2 = new CreateImg("https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF");
  const img3 = new CreateImg("https://t7.baidu.com/it/u=2582370511,530426427&fm=193&f=GIF");
  const img4 = new CreateImg("https://t7.baidu.com/it/u=993577982,1027868784&fm=193&f=GIF");
  const img5 = new CreateImg("https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF");


  const box1 = new CreateBox("box1");
  const box2 = new CreateBox("box2");
  const box3 = new CreateBox("box3");
  document.body.appendChild(box1.ele);

  box1.add(img1)
  box1.add(box2)
  box1.add(box3)

  box2.add(img4)
  box3.add(img5)

  // box1.remove(img3);

  box1.addBorder();

  box3.removeBorder();

  // box1
  //   img1
  //   box2
  //     img4
  //   box3
  //     img5







  


  
</script>
</html>